<template>
  <div id="PlotWrapper">
    <div id="fig" ref="fig" />
  </div>
</template>

<script>
import Plotly from 'plotly.js-dist-min';
export default {
  name: 'PlotWrapper',
  props: {
    json: {
      type: String,
      default: ''
    }
    // fig_json: {
    //   type: Object,
    //   default: null
    // }
  },
  data() {
    return {
      fig: null
    };
  },
  watch: {
    json(newJson, oldJson) {
      this.plot1(newJson);
    }
    // fig_json: {
    //   handler(newObject, oldObject) {
    //     this.plot2(newObject);
    //   },
    //   deep: true
    // }
  },
  mounted() {
    this.fig = this.$refs.fig;
    if (this.json !== '') {
      this.plot1(this.json);
    }
    // else if (this.fig_json !== null) {
    //   this.plot2(this.fig_json);
    // }
  },
  methods: {
    plot1(json) {
      // console.log(json);
      const fig_json = JSON.parse(json);
      // console.log(fig_json);
      if ('layout' in fig_json) {
        Plotly.newPlot(this.fig, fig_json['data'], fig_json['layout']);
      } else {
        Plotly.newPlot(this.fig, fig_json['data']);
      }
    }
    // plot2(fig_json) {
    //   Plotly.newPlot(this.fig, fig_json['data']);
    // }
  }
};
</script>

<style scoped>
#PlotWrapper{
  min-height:200px;
}
</style>
